<!--
 * hi-cell - 单元格
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-cell" :class="_classes" :style="_styles" :hover-class="hover" @tap="_emits('click')">
        <view class="hi-cell__left" v-if="leftIcon">
            <slot name="left">
                <hi-icon class="hi-cell__left__icon" :name="leftIcon" v-if="leftIcon"></hi-icon>
            </slot>
        </view>
        <view class="hi-cell__body">
            <slot name="body">
                <view class="hi-cell__content">
                    <view class="hi-cell__title">
                        <slot name="title">
                            {{ title }}
                        </slot>
                    </view>
                    <view class="hi-cell__tips">
                        <slot name="tips">
                            {{ tips }}
                        </slot>
                    </view>
                </view>
            </slot>
            <slot name="desc">
                <view class="hi-cell__desc" v-if="desc">
                    {{ desc }}
                </view>
            </slot>
        </view>
        <view class="hi-cell__right" v-if="rightIcon">
            <slot name="right">
                <hi-icon class="hi-cell__right__icon" :name="rightIcon"></hi-icon>
            </slot>
        </view>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { ref, computed } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // 事件
    const _emits = defineEmits(["click"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 标题加粗
        if (_props.bold) classes.push("hi-cell--title-bold");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 背景
        if (_props.bg) styles.push(`--hi-cell-background: ${_props.bg}`);

        // 圆角
        if (_props.radius) styles.push(`--hi-cell-border-radius: ${_props.radius}`);

        // 内边距
        if (_props.padding) styles.push(`--hi-cell-padding: ${_props.padding}`);

        // 文字颜色
        if (_props.color) styles.push(`--hi-cell-color: ${_props.color}`);

        // 文字大小
        if (_props.fontSize) styles.push(`--hi-cell-font-size: ${_props.fontSize}`);

        // 左侧图标
        if (_props.leftIconColor) styles.push(`--hi-cell-left-icon-color: ${_props.leftIconColor}`);
        if (_props.leftIconSize) styles.push(`--hi-cell-left-icon-font-size: ${_props.leftIconSize}`);

        // 标题
        if (_props.titleColor) styles.push(`--hi-cell-title-color: ${_props.titleColor}`);
        if (_props.titleFontSize) styles.push(`--hi-cell-title-font-size: ${_props.titleFontSize}`);

        // 描述
        if (_props.descColor) styles.push(`--hi-cell-desc-color: ${_props.descColor}`);
        if (_props.descFontSize) styles.push(`--hi-cell-desc-font-size: ${_props.descFontSize}`);

        // 提示
        if (_props.tipsColor) styles.push(`--hi-cell-tips-color: ${_props.tipsColor}`);
        if (_props.tipsFontSize) styles.push(`--hi-cell-tips-font-size: ${_props.tipsFontSize}`);

        // 右侧图标
        if (_props.rightIconColor) styles.push(`--hi-cell-right-icon-color: ${_props.rightIconColor}`);
        if (_props.rightIconSize) styles.push(`--hi-cell-right-icon-font-size: ${_props.rightIconSize}`);

        // 右侧图标旋转角度
        if (_props.rotate) styles.push(`--hi-cell-right-icon-rotate: ${_props.rotate}deg`);

        return styles;
    });
</script>

<style lang="scss" scoped>
    .hi-cell {
        background: var(--hi-cell-background, var(--hi-background-default));
        border-radius: var(--hi-cell-border-radius, 5px);
        padding: var(--hi-cell-padding, 12px);
        color: var(--hi-cell-color, inherit);
        font-size: var(--hi-cell-font-size, inherit);
        display: var(--hi-cell-display, flex);
        align-items: var(--hi-cell-align-items, center);
        gap: var(--hi-cell-gap, 8px);

        &__left {
            flex-shrink: var(--hi-cell-left-flex-shrink, 0);

            &__icon {
                color: var(--hi-cell-left-icon-color, inherit);
                font-size: var(--hi-cell-left-icon-font-size, 1.25em);
            }
        }

        &__body {
            flex: var(--hi-cell-body-flex, 1);
            display: var(--hi-cell-body-display, flex);
            align-items: var(--hi-cell-body-align-items, flex-start);
            flex-direction: var(--hi-cell-body-flex-direction, column);
            gap: var(--hi-cell-body-gap, 5px);
        }

        &__content {
            display: var(--hi-cell-content-display, flex);
            align-items: var(--hi-cell-content-align-items, center);
            gap: var(--hi-cell-content-gap, 8px);
            width: var(--hi-cell-content-width, 100%);
        }

        &__title {
            color: var(--hi-cell-title-color, inherit);
            font-size: var(--hi-cell-title-font-size, inherit);
            font-weight: var(--hi-cell-title-font-weight, inherit);
            flex: var(--hi-cell-title-flex, 1);
        }

        &__desc {
            color: var(--hi-cell-desc-color, inherit);
            font-size: var(--hi-cell-desc-font-size, 0.85em);
            flex-shrink: var(--hi-cell-desc-flex-shrink, 0);
            opacity: var(--hi-cell-desc-opacity, 0.6);
        }

        &__tips {
            color: var(--hi-cell-tips-color, inherit);
            font-size: var(--hi-cell-tips-font-size, 0.85em);
            opacity: var(--hi-cell-tips-opacity, 0.6);
        }

        &__right {
            color: var(--hi-cell-right-color, inherit);
            font-size: var(--hi-cell-right-font-size, inherit);
            flex-shrink: var(--hi-cell-right-flex-shrink, 0);
            opacity: var(--hi-cell-right-opacity, 0.6);

            &__icon {
                color: var(--hi-cell-right-icon-color, inherit);
                font-size: var(--hi-cell-right-icon-font-size, inherit);
                transform: rotate(var(--hi-cell-right-icon-rotate, 0deg));
            }
        }

        &--title-bold {
            .hi-cell__title {
                font-weight: var(--hi-cell-title-font-weight, 700);
            }
        }
    }
</style>
